<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>margin 负值应用场景和最佳实践</title>
    <!-- <link rel="stylesheet" href="./css/reset.css" /> -->
    <style>
      .box1 {
        width: 520px;
        border: 2px solid red;
        overflow: hidden;
      }

      .clearfix::after {
        display: block;
        content: "";
        clear: both;
      }

      .box1 .left {
        width: 200px;
        float: left;
        background-color: skyblue;
        padding-bottom: 2000px;
        margin-bottom: -2000px;
      }

      .box1 .right {
        width: 300px;
        background-color: pink;
        float: right;
      }

      body,
      ul {
        margin: 0;
      }

      ul {
        list-style: none;
        padding: 0;
      }

      .box2 {
        width: 801px;
        height: 200px;
        margin: 50px auto;
      }

      .box2 ul li {
        width: 199px;
        height: 198px;
        border: 1px solid red;
        float: left;
        margin-right: -1px;
      }

      .head {
        height: 100px;
        font-size: 0;
        text-align: center;
        line-height: 100px;
      }

      .head span {
        display: inline-block;
        border: 4px solid #fff;
        width: 50px;
        height: 50px;
        background-color: skyblue;
        border-radius: 52px;
        vertical-align: middle;
        margin-right: -20px;
      }

      .head span img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .box3 {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        position: relative;
      }

      .box3 .item {
        width: 100px;
        height: 100px;
        background-color: khaki;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
      }

      body {
        /*核心代码*/
        min-width: 650px;
      }

      .fl {
        float: left;
      }
      .header {
        height: 100px;
        background-color: tomato;
      }

      .container {
        padding-left: 200px;
        padding-right: 250px;
      }
      .container .center {
        width: 100%;
        height: 300px;
        background-color: skyblue;
      }
      .container .left {
        width: 200px;
        height: 300px;
        background-color: cadetblue;
        /*核心代码*/
        margin-left: -100%;
        position: relative;
        left: -200px;
      }
      .container .right {
        width: 250px;
        height: 300px;
        background-color: aquamarine;
        /*核心代码*/
        margin-right: -250px;
      }
      .footer {
        height: 100px;
        background-color: #000;
      }

      .main {
        background-color: #ddd;
        width: 100%;
      }
      .main .main-content {
        background-color: skyblue;
        height: 300px;
        /*核心代码*/
        margin: 0 200px 0 200px;
      }
      .left {
        width: 200px;
        height: 300px;
        background-color: coral;
        /*核心代码*/
        margin-left: -100%;
      }
      .right {
        width: 200px;
        height: 300px;
        background-color: tomato;
        /*核心代码*/
        margin-left: -200px;
      }
    </style>
  </head>
  <body>
    <h2>等高布局</h2>
    <p>不管左边蓝色盒子中内容多少，其高度都会随着右边的粉色盒子变高的效果。</p>

    <div class="box1 clearfix">
      <!-- 左边 -->
      <div class="left">111</div>
      <!-- 右边 -->
      <div class="right">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ul>
      </div>
    </div>

    <h2>一行多列网格布局</h2>

    <div class="box2">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>

    <h2>头像叠加效果</h2>

    <div class="head">
      <span><img src="./images/avatar1.png" alt="" /></span>
      <span><img src="./images/avatar2.png" alt="" /></span>
      <span><img src="./images/avatar3.png" alt="" /></span>
      <span><img src="./images/avatar4.png" alt="" /></span>
    </div>

    <h2>元素水平垂直居中</h2>
    <p>margin 负值与 position 定位，实现元素水平垂直居中效果</p>

    <div class="box3">
      <div class="item"></div>
    </div>

    <h2>圣杯布局 与 双飞翼布局</h2>

    <p>中间一栏内容最重要，最先加载和渲染，同时对搜索引擎优化最利。</p>
    <p>两边内容固定，中间内容自适应</p>

    <h3>圣杯布局</h3>
    <div class="header">头部</div>
    <div class="container clearfix">
      <div class="center fl">中间</div>
      <div class="left fl">左边</div>
      <div class="right fl">右边</div>
    </div>
    <div class="footer">底部</div>

    <h3>双飞翼布局</h3>

    <div class="main fl">
      <div class="main-content">中间</div>
    </div>
    <div class="left fl">左边</div>
    <div class="right fl">右边</div>
  </body>
</html>
